<template>
  <div>
    <title>
      前端基本操作-Select选择器单选回显方案，针对前端Select选择器列表值被删除回显异常、前端Select选择器性能优化等问题
    </title>

    <div>
      <el-select
          v-model="detail.userId"
          value-key="userId"
          placeholder="请选择单选"
          @focus="queryOptions"
          @change="handleChange"
      >
        <el-option
            v-for="user in userList"
            :key="user.userId"
            :label="user.userNickName"
            :value="user.userId"
            :disabled="user.disabled"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  //这里存放数据
  data() {
    return {
      // 用户列表
      userList: [],
      //   表单详情
      detail: {
        userId: null,
        userNickName: null,
      },
    };
  },
  //方法集合
  methods: {
    // 查询后端详情数据
    queryDetail() {
      console.log("queryDetail 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));
      // 后端接口详情数据
      this.detail = {
        userId: "6",
        userNickName: "福跳墙",
        userIdNameMap: {
          "6": "福跳墙"
        }
      };

      // 用户下拉框回显，后端给id和name回显下拉列表
      this.userList = [
        {
          userId: this.detail.userId,
          userNickName: this.detail.userNickName,
        },
      ];
    },

    /**
     * Select选择器回显方案-方案1：添加禁用项：用户下拉框回显，详情用户不存在，在最新用户列表中添加一个禁用项。
     */
    // focus	当 input 获得焦点时触发	(event: Event)
    // 在新增编辑页，当用户点击下拉框时，查询后端用户列表
    queryOptions() {
      console.log("queryOptions 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));

      // 查询后端接口得到最新用户列表
      const userListNew = [
        {
          userId: "1",
          userNickName: "黄金糕",
        },
        {
          userId: "2",
          userNickName: "双皮奶",
        },
        {
          userId: "3",
          userNickName: "蚵仔煎",
        },
        {
          userId: "4",
          userNickName: "龙须面",
        },
        {
          userId: "5",
          userNickName: "北京烤鸭",
        },
      ];

      // 判断userIds不为null和undefined
      if (this.detail.userId !== null && this.detail.userId !== undefined) {
        // 检查userId是否在最新用户列表存在
        const userExists = userListNew.some(
            (user) => user.userId === this.detail.userId
        );
        // 如果不存在，则创建一个新的数组包含原始数据和新用户数据
        this.userList = userExists
            ? userListNew // 如果已存在，则直接使用原始数组
            : [
              ...userListNew,
              {
                userId: this.detail.userId,
                userNickName: this.detail.userNickName,
                disabled: true,
              },
            ]; // 如果不存在，则添加新用户
      }

      console.log("queryOptions:" + JSON.stringify(this.userList));
    },

    // change	选中值发生变化时触发	目前的选中值
    handleChange(user) {
      console.log("handleChange 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));

      console.log("handleChange 目前的选中值用户信息" + JSON.stringify(user));
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log("created 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));
    //   查询后端详情数据
    this.queryDetail();
  },

  // 组件挂载完成后执行
  mounted() {
    // 在 JavaScript 代码里就能通过 this.$refs.myInput 访问这个输入框。
    // 不过，$refs 只有在组件渲染完成后才会包含有效的引用。
    console.log("mounted 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));
  }
};
</script>
